<template>
    <div class=con_store_main>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="通知标题">
                <el-input v-model="formInline.title" placeholder="输入通知标题"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="findData" type="primary" icon="el-icon-search">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table class="table" :data="tableData" style="width: 100%" v-loading="loading"
            :default-sort="{ prop: 'index', order: 'descending' }">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="消息内容:">
                            <span>{{ props.row.content }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column type="index" label="序号" sortable width="120">
            </el-table-column>
            <el-table-column prop="title" label="消息标题">
            </el-table-column>
            <el-table-column prop="messageType" label="消息类型">
            </el-table-column>
            <el-table-column prop="sendTime" label="发送时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="editMessage(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- <el-pagination style="margin: auto; margin-top: 8px" :hide-on-single-page="value"
            :current-page.sync="currentPage" :page-size="6" :pager-count="11" layout="prev, pager, next"
            :total="this.total" @current-change="handleSizeChange">
        </el-pagination> -->
    </div>
</template>
<script>
import { request } from "@/network/request/request";
export default {
    mounted() {
        this.findData();
    },
    data() {
        return {
            updateForm: {
                messageId: 0,
                title: '',
                messageType: '',
                content: '',
            },
            types: [{ value: '系统通知', label: '系统通知' }],
            formInline: { title: '' },
            updateBox: false,
            addBox: false,
            currentPage: 1, // 当前页码
            pageSize: 6, // 每页显示的记录数
            total: 0, // 总数目，默认设置为 0
            loading: false,
            value: false,
            tableData: [],
        }
    },
    methods: {
        time() {
            this.loading = true;
            setTimeout(() => {
                this.loading = false;
            }, 600);
        },
        handleSizeChange() {
            this.findData();
        },
        async findData() {
            this.time();
            const params = {
                title: this.formInline.title,
                email: localStorage.getItem("email"),
                currentPage: this.currentPage /* 当前页码 */,
                pageSize: this.pageSize /* 页码大小 */,
            };
            const config = {
                url: "api/user/user-message",
                method: "get",
                params: params,
            };
            const res = await request(config);
            if (res.data.code === 1) {
                this.total = res.data.data.total; /* 得到数据的总数 */
                this.tableData = res.data.data.pageList; /* 得到数据 */
            }

        },
        async editMessage(row) {
            const config = {
                url: 'api/user/user-message',
                method: "put",
                data: {
                    messageId: row.messageId,
                    email: localStorage.getItem("email")
                }
            }
            const res = await request(config);
            if (res.data.code === 1) {
                this.$message.success("修改成功");
                this.findData();
            }
        },
    }
}
</script>
<style scoped>
.con_store_main {
    height: 498px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}
</style>